<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="v in newArry">
					<h2>{{v.title}}</h2>
					<p>{{v.content}}</p>
					<p>{{v.time | formatDate}}</p>
				</li>
			</ul>
			<hr >
			<ul>
				<li v-for="v in productArry">
					<h2>{{v.pName}}</h2>
					<p>{{v.pPrice | currency(1)}}元</p>
					<p>{{v.pCount}}斤</p>
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			//全局过滤器
			Vue.filter("formatDate",function(v){
				// 回调的第一个参数，为使用过滤器时 | 前的数据
				let newDate="";
				let splitArr=v.split("-");
				newDate=splitArr[0]+"年"+splitArr[1]+"月"+splitArr[2]+"日"+splitArr[3]+"时"+splitArr[4]+"分"+splitArr[5]+"秒";
				// 将处理好的数据展示
				return newDate;
			});
			// 过滤器创建完毕之后，只能在{{}}或者v-bind的地方使用
			// 语法：数据 | 过滤器名
			
			new Vue({
				el:'#app',
				data:{
					newArry:[
						{
							title:"题目",content:"主要内容",time:"2021-11-24-11-24-32"
						},
						{
							title:"题目",content:"主要内容",time:"2021-11-28-13-54-52"
						},
						{
							title:"题目",content:"主要内容",time:"2021-11-29-16-34-22"
						},
					],
					productArry:[
						{pName:"橘子",pPrice:3.56,pCount:5},
						{pName:"苹果",pPrice:5.1,pCount:3},
						{pName:"猕猴桃",pPrice:6,pCount:6},
						{pName:"粗酶",pPrice:8.345,pCount:10}
					]
				},
				//局部过滤器
				filters:{
					//如果过滤器在使用的时候需要传值，在使用的同时加（），把需要传递的值写入（），
                    // 对应过滤器的回调从第二个形参开始才是（）里传入的实参，第一个永远都是需要过滤的值
					currency(v,count){
						return v.toFixed(count);
					}
				}
			})
		</script>
	</body>
</html>
